<template>
        <div class="common-layout">
            <el-container class="container">
                <el-aside width="20%">
                    <div>
                        <img src="logo.png" />
                    </div>
                    <el-menu :unique-opened="true" :router="true" default-active="odometer">
                        <el-menu-item index="odometer">
                            <template #title>
                                <el-icon><odometer /></el-icon>
                                <span>仪表盘</span>
                            </template>
                        </el-menu-item>
    
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><icon-menu /></el-icon>
                                <span>常用设置</span>
                            </template>
                            <el-menu-item index="teacherManagement">教师管理</el-menu-item>
                            <el-menu-item index="studentManagement">学生管理</el-menu-item>
                            <el-menu-item index="announcementManagement">公告管理</el-menu-item>
                            <el-menu-item index="systemConfiguration">系统配置</el-menu-item>
                            <el-menu-item index="judgmentServer">判题服务器</el-menu-item>
                        </el-sub-menu>
    
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon><Aim /></el-icon>
                                <span>问题</span>
                            </template>
                            <el-menu-item index="problemList">问题列表</el-menu-item>
                            <el-menu-item index="addTopic">增加题目</el-menu-item>
                            <el-menu-item index="ImportAndExportTopics">导入导出题目</el-menu-item>
                        </el-sub-menu>
    
                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon><trophy /></el-icon>
                                <span>比赛&练习</span>
                            </template>
                            <el-menu-item index="competitionList">比赛</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="5">
                        <template #title>
                            <el-icon><collection /></el-icon>
                            <span>课程</span>
                        </template>
                        <el-menu-item index="courseList">课程列表</el-menu-item>
                        <el-menu-item index="createCourse">创建课程</el-menu-item>
                    </el-sub-menu>

                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <el-dropdown size="large">
                        <span class="el-dropdown-link">
                            username
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>logout</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-icon><share /></el-icon>
                    <el-icon><search /></el-icon>
                </el-header>
                <el-main>
                    <router-view/>
                </el-main>
                <el-footer>Build Version: 20230929bd</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { Odometer, Menu as IconMenu, Aim, Trophy, Collection, Search, Share, ArrowDown } from '@element-plus/icons-vue';

export default {
    name: 'index',
    components: {
        Odometer, IconMenu, Aim, Trophy, Collection, Search, Share, ArrowDown
    },
    methods: {
        
    }
}
</script>

<style>
    .common-layout,.container{
        position: relative;
        widows: 100%;
        height: 100%;
    }
    .el-aside >div{
        width: 100%;
        width: 20%;
        vertical-align: middle;
        text-align: center;
    }
    .el-aside div img{
        width: 50%;
        height: 90%;
    }
    .el-header{
        background-color: #f9fafc;
    }
    .el-header .eldropdown{
        margin-top: 16px;
    }
    .el-dropdown-link{
        font-size: 23px;
        font-weight: bolder;
        align-items: center;
    }
    .el-main,.el-footer{
        background-color: #EDECEC;
    }
</style>